<template>
  <div class="editInfo-wrap">
    <G_header title="修改基本信息" />
    <van-cell-group>
      <van-field
        center
        clearable
        label="头像"

      >
      <div slot="input"></div>
      <div slot="button" style="max-height: 40px;width:40px;">
        <van-uploader
        :after-read="afterRead" 
        multiple
        v-model="fileList"
        :max-count="1"
        preview-size="40px"

      />
      </div>
      
      </van-field>
    </van-cell-group>
     <van-action-sheet
        v-model="sexShow"
        :actions="actions"
        @select="onSelect"
      />
    <van-cell-group>
      <van-field v-model="form.name" placeholder="请输入昵称" label="昵称" />
      <van-field v-model="form.sex" placeholder="请选择性别" label="性别" disabled right-icon="more-o" @click-right-icon="sexShow = true" />
      <van-field v-model="form.email" type="email" placeholder="请输入邮箱" label="邮箱"  />
      <van-field v-model="form.mobile" type="number" @input="mobile" :error-message="mobileErrText" placeholder="请输入电话" label="电话"  />
    </van-cell-group>
    <div style="width: 96%;margin: 30px auto 0;">
      <van-button type="primary" block size="normal" @click="edit">确认修改</van-button>
    </div>
  </div>
</template>

<script>
import { ActionSheet } from 'vant';
import { Notify } from 'vant';
export default {
  name: 'EditInfo',
  data(){
    return {
      value: 12,
      avatar:null,
      form:{
        name:'',
        sex:'',
        mobile:'',
        wechat:'',
        email:''
      },
      fileList:[],
      sexShow: false,
      actions: [
        { name: '男' },
        { name: '女' }
      ],
      mobileErrText:null
    }
  },
  methods:{
    afterRead(file) {
			this.fileList[0].url = file.content;
			let params = new FormData();
      params.append('file',file.file)
			this.axios.post('/api/v1/file/upload',params).then(res => {
			if(res.data.code == 200){
        this.avatar = res.data.data;
				Notify({ type: 'success',background: '#07c160', message: res.data.message,onClose:()=>{
					this.btndisabled = false;
				}})
			}else {
				Notify({ type: 'error', message: res.data.message });
				this.btndisabled = true
			}
			}).catch(error => {
				this.btndisabled = true;
				Notify({ type: 'error', message: error.message });
			});
    },
     onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
        this.sexShow = false;
        this.form.sex = item.name
    },
    async edit(){
      let id = this.global.state.userInfo.id;
      let params = {};
      params.token = sessionStorage.getItem("token");
      params.avatar = this.avatar;
      params.nickname = this.form.name;
      params.mobile = this.form.mobile;
      params.email = this.form.email;
      params.sex = this.form.sex == '男' ? 0 : 1;
      const info = this.axios.post('/api/store/user/edit/'+id,params);
      await info.then(res=>{
        this.getuserInfo();
        Notify({ type: 'success',background: '#07c160', message: res.data.message})
      }).catch(err=>{
        console.log(err);
      })
    },
    async getuserInfo(){
      let params = {};
      params.token = sessionStorage.getItem("token");
      const info =  this.axios.get('/api/wechatofficial/mine',{params});
      await info.then(res=>this.global.state.userInfo = res.data.data).catch(err=>console.log(err))
    },
    mobile(e){
      if(this.checkPhone(e)){
        this.mobileErrText = null
      }else {
        this.mobileErrText = '手机号码格式错误'
      }
    },
    checkPhone(phone){
        if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)))return false
        return true
    }
  }
  
}
</script>
<style lang="less" scoped>


</style>
